<template>
    <div class="profile">
      <el-form @submit.prevent="updateProfile">
        <el-form-item label="Username">
          <el-input v-model="profileForm.username" placeholder="Username" disabled></el-input>
        </el-form-item>
        <el-form-item label="Email">
          <el-input v-model="profileForm.email" placeholder="Email"></el-input>
        </el-form-item>
        <el-form-item label="password">
          <el-input type="password" v-model="profileForm.password" placeholder="New Password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit">Update Profile</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted,watch } from 'vue';
  import { useUserStore } from '@/stores/userStore';
  import { useAuthStore } from '@/stores/authStore';
  import { ElMessageBox } from 'element-plus';
  import { useRoute } from 'vue-router';
  
  const userStore = useUserStore();
  const route = useRoute();
  const profileForm = ref({
    username: '',
    email: '',
    password: ''
  });

    const authStore = useAuthStore();
    const userInfo = authStore.user;
    profileForm.value = { ...userInfo, newPassword: '' };

  const updateProfile = async () => {
    try {
      // 调用更新用户信息的 API
      await userStore.updateUserInfo(profileForm.value);
      ElMessageBox.alert('Profile updated successfully', 'Success', { type: 'success' });
    } catch (error) {
      ElMessageBox.alert('Failed to update profile', 'Error', { type: 'error' });
    }
  };
  </script>
  
  <style>
  /* 添加 CSS 样式 */
  .profile {
    /* 样式代码 */
  }
  </style>
  